<template>
    <div class="shop-ad">
        <Swipe class="ad-swipe" :autoplay="3000">
            <SwipeItem v-for="(item, index) in adList" :key="index">
                <img class="img-value" :src="imageSrc(item)" alt="">
            </SwipeItem>
        </Swipe>
    </div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem, Lazyload } from 'vant';
import { createShopAdImageSrc } from '@common/utils';
export default {
    name: 'ShopAd', // 轮播广告
    components: {
        Swipe,
        SwipeItem,
    },
    props: {
        adList: {
            type: Array,
            default: () => [],
        },
    },
    computed: {
        imageSrc() {
            return item => {
                return createShopAdImageSrc(item.pic);
            };
        },
    },
    methods: {
        onChange(index) {
            console.log('点击的索引为：', index);
        },
    },
};
</script>

<style lang="less">
.shop-ad {
    // height: 240px;
    padding: @shop-gap @shop-gap-md;
    // background-color: rosybrown;
    .ad-swipe {
        height: 137px;
        border-radius: @shop-border-radius-md;
        overflow: hidden;
    }
    .van-swipe-item {
        border-radius: @shop-border-radius-md;
    }
    .img-value {
        height: 100%;
        width: 100%;
    }
    .van-swipe__indicator.van-swipe__indicator--active {
        width: 15px;
        border-radius: 3px;
    }
}
</style>
